<template>
	<wsPage title="品牌列表">
		<div slot="page_operate">
			<Button  @click="init"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>

		<wsSmPanel :page="table.page" @simple-query="queryBrandList" @page-change="queryBrandList">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="品牌名称">
						<Input v-model="queryForm.name" placeholder="请输入"></Input>
					</FormItem>
					<!-- <FormItem label="是否热门品牌" prop="ishHot" @change="change">
		                <RadioGroup v-model="queryForm.hot">
		                    <Radio label="0" :disabled="isEdit">否</Radio>
		                    <Radio label="1" :disabled="isEdit">是</Radio>
		                </RadioGroup>
		            </FormItem> -->
				</Form>
			</div>
			<div slot="list_operate">
				<Button type="primary" @click="showAddModal">新增品牌</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.datas" style="width: 100%">
					<ws-table-column align="center" prop="name" label="名称"></ws-table-column>
					<ws-table-column align="center" prop="fileId" label="LOGO" width="160">
						<template slot-scope="scope">
							<img :src="scope.row.logo" style="width: 40px;height: 40px;" v-if="scope.row.logo" />
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="childsNum" label="类型" width="120">
						<template slot-scope="scope">
							<Tag v-if="scope.row.hot == 1">热门</Tag>
							<Tag v-if="scope.row.hot == 0">普通</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="country" label="国家" width="120"></ws-table-column>
					<ws-table-column align="center" prop="wDesc" label="描述" min-width="180"></ws-table-column>
					<ws-table-column align="center" width="120" label="操作" fixed="right">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" size="small">编辑</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<!--新增品牌弹框-->
		<wsModal v-model="modal.show" ok-text="保存" :title="modalTitle+'品牌'" @on-ok="appCategoryModalOk" @on-cancel="appCategoryModalCancel">
			<Form ref="brandForm" :model="modal.form" :rules="modal.rules" :label-width="100">
				<FormItem label="名称" prop="name">
					<Input v-model="modal.form.name"></Input>
				</FormItem>
				<FormItem label="是否热门品牌" prop="hot" required>
					<RadioGroup v-model="modal.form.hot">
						<Radio :label="1">是</Radio>
						<Radio :label="0">否</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="品牌国家" prop="country">
					<Input v-model="modal.form.country"></Input>
				</FormItem>
				<FormItem label="品牌LOGO" prop="fileId" required>
					<ws-upload-cos ref="upload" catelog="merchants" :cfile-key="modal.form.logo" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadSuccess" style="display: inline-block;width:350px;">
						<div style="width: 150px;height:150px;line-height: 180px;border: 1px solid #ccc;text-align:center;cursor: pointer;" v-if="modal.form.logo == ''">
							<Icon type="camera" size="20"></Icon>
						</div>
						<img :src="modal.form.logo" v-if="modal.form.logo != ''" style="width: 150px;height:150px;cursor: pointer;">
						<div><span>图片规格为1024*988</span></div>
					</ws-upload-cos>
				</FormItem>
				<FormItem label="品牌描述" prop="wDesc">
					<Input v-model="modal.form.wDesc" type="textarea" :rows="4"></Input>
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				//条件查询
				queryForm: {
					name: ''
				},
				table: {
					datas: [], //列表数据
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
				},

				//新增弹框
				modal: {
					show: false,
					form: {
						id: '',
						name: '', //品牌名称
						hot: 1, //是否 热门品牌(0:否，1：是)    
						country: '', //国家
						logo: '', //品牌LOGO
						wDesc: ''
					},
					rules: {
						name: [{
								required: true,
								message: '请输入品牌名称'
							}
						],
						country: [{
							required: true,
							message: '请输入品牌国家'
						}]
					}
				}
			}
		},
		computed: {
			/**
			 * 当前的modal是否为编辑状态
			 */
			isEdit() {
				return !Util.vad.isBlank(this.modal.form.id);
			},
			/**
			 * 模态框标题
			 */
			modalTitle() {
				let modalTitle = Util.vad.isBlank(this.modal.form.id) ? '新增' : '编辑';
				return modalTitle;
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				this.queryForm.name =  '';
				this.queryBrandList();
			},
			//分页查询品牌
			queryBrandList() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ops/brands/' + pageSize + '/' + pageNum, {
						params: _this.queryForm
					}).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning('查询失败');
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.datas = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 显示新增弹框
			 */
			showAddModal() {
				//设置父节点
				this.modal.show = true;
			},			
			
			uploadSuccess(response, file, fileList) {
				if(0 == response.meta.code) {
					let logoUrl = response.data.pubFileUrl;
					this.modal.form.logo = logoUrl;
				}
			},

			/**
			 * 打开编辑模态框
			 */
			showEditModal(row) {
				let _this = this;
				let brandId = row.id;
				this.axios.get('/ws/ops/brands/' + brandId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					_this.treePath = [];
					if(0 == resMeta.code) {
						_this.initData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			initData(data) {
				this.modal.form.id = data.id;
				this.modal.form.name = data.name;
				this.modal.form.hot = data.hot;
				this.modal.form.country = data.country;
				this.modal.form.logo = data.logo;
				this.modal.form.wDesc = data.wDesc;
				this.modal.show = true;
			},
			/**
			 * 新增品牌确认操作
			 */
			appCategoryModalOk() {
				const _this = this;
				this.$refs['brandForm'].validate((valid) => {
					if(valid) {
						//如果图片没有上传
						if(null == this.modal.form.logo || '' == this.modal.form.logo) {
							this.$Message.info('请上传logo');
							return;
						}
				
						if(_this.isEdit) {
							_this.editData();
						} else {
							_this.saveData();
						}
					}
				});
			},
			//保存品牌
			saveData() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.post('/ws/ops/brand', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.appCategoryModalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增品牌失败:' + message_);
					}
				});
			},
			//修改品牌
			editData() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.put('/ws/ops/brand', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.appCategoryModalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改品牌信息失败:' + message_);
					}
				});
			},
			
			
			/**
			 * 删除单个品牌提示
			 */
			singleDelCategory(rowId) {
				console.log(rowId);
				const _this = this;
				this.$confirm({
					title: '操作提示',
					width: 300,
					content: '你确认删除本行记录吗?',
					onOk: function() {
						_this.delRow(rowId);
					}
				});
			},

			/**
			 * 删除单个APP类目
			 */
			delRow(rowId) {
				const _this = this;
				this.axios.delete('/ws/ops/brands/' + rowId).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除APP类目失败:' + message_);
					}
				});
			},

			/**
			 * APP类目新增的弹框取消操作
			 */
			appCategoryModalCancel() {
				this.modal.show = false;
				this.modal.form.id = '';
				this.modal.form.name = ''; //品牌名称
				this.modal.form.hot = 1; //是否 热门品牌(0:否，1：是)    
				this.modal.form.country = ''; //国家
				this.modal.form.logo = ''; //品牌LOGO
				this.modal.form.wDesc = '';
				this.$refs['brandForm'].resetFields();
			}
		}
	}
</script>
<style>
	.demo-upload-list {
		display: inline-block;
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}
	
	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}
	
	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}
	
	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}
	
	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
	
	.showIcon {
		margin: auto 5px;
	}
</style>